<template>
  <div>
    <Select></Select>
    <div>
      <van-row>
        <van-col span="6">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
          </van-dropdown-menu>
        </van-col>
        <van-col span="6" style="text-align: center;line-height:48px">销量</van-col>
        <van-col span="6" style="text-align: center;line-height:48px">价格优先</van-col>
        <van-col span="6" style="text-align: center;line-height:48px">
          <van-dropdown-menu>
            <van-dropdown-item title="筛选" ref="item">
              <van-cell center title="包邮">
                <template #right-icon>
                  <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
                </template>
              </van-cell>
              <van-cell center title="优惠商品">
                <template #right-icon>
                  <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
                </template>
              </van-cell>
              <div style="padding: 5px 16px;">
                <van-button type="danger" block round @click="onConfirm">
                  确认
                </van-button>
              </div>
            </van-dropdown-item>
          </van-dropdown-menu>

        </van-col>
      </van-row>
    </div>
    <br>
    <div>
      <van-tabs>
        <van-tab :title="'红米手机'">
          <template #title><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208112039_cb21539a05b3926928b9c4d8295f2c57.png" alt="" height="30px">
            <br>
            红米手机
          </template>
          <br>
          <div v-for="p in product">
            <van-card
                :price=p.price
                :tag=p.tag
                :desc=p.desc
                :title=p.title
                :thumb=p.thumb
            >
              <template #tags>
                <van-tag plain type="danger">{{p.description}}</van-tag>

              </template>
            </van-card>
          </div>

        </van-tab>
        <van-tab :title="'红米笔记本'">
          <template #title><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202206031846_3c1fb37b85df863bdfa65a804f69d4b9.jpg" alt="" height="30px">
            <br>
            小米笔记本
          </template>
          <br>
          <van-card
              price="11998.00"
              desc="[至高优惠200元，享6期免息，信用卡分期满减享优惠] 双卡双5G"
              title="Redmi G 游戏本2022"
              thumb="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50b73aeedeeb27392a15d9d479e5d793.png"
          >
            <template #tags>
              <van-tag plain type="danger">16英寸 2.5k</van-tag>
              <van-tag plain type="danger">165Hz电竞超大屏</van-tag>
              <van-tag plain type="danger">3050Ti</van-tag>
            </template>
          </van-card>
        </van-tab>
        <van-tab :title="'耳机'">
          <template #title><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03b4bf93894a1297a7f1c74d46446fac.png" alt="" height="30px">
            <br>
            耳机
          </template>
          <br>
          <van-card
              price="199.00"
              title="Redmi Buds4"
              thumb="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fb27e27e6587254da27de5ba9c889512.png"
          >
            <template #tags>
              <van-tag plain type="danger">HiFi高保真音质</van-tag>
              <van-tag plain type="danger">59ms游戏低延迟</van-tag>
            </template>
          </van-card>
        </van-tab>
        <van-tab :title="'盲盒'">
          <template #title><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a26b7fc71f697648300229f52b2f9ce.png" alt="" height="30px">
            <br>
            盲盒
          </template>

          <br>
          <van-card
              price="199.00"
              title="潮流限定盲盒"
              thumb="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a26b7fc71f697648300229f52b2f9ce.png"
          >
            <template #tags>
              <van-tag plain type="danger">王克晶品牌吉祥物</van-tag>
              <van-tag plain type="danger">潮流限定盲盒</van-tag>
            </template>
          </van-card>
        </van-tab>
        <van-tab :title="'洗衣机'">
          <template #title><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0157ab4a0bb49c830729b9ca068e5771.png" alt="" height="30px">
            <br>
            洗衣机
          </template>
        </van-tab>
        <van-tab :title="'红米电视'">
          <template #title><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202206011833_d3aa9c7fd3769fd661305d765ad729f3.jpg" alt="" height="30px">
            <br>
            红米电视
          </template>
        </van-tab>
      </van-tabs>
    </div>

    <hr>
    <p style="text-align: center">商品推荐</p>
    <br>

    <van-row>
      <van-col span="12">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205241526_03b4bf93894a1297a7f1c74d46446fac.png?thumb=1&q=90&w=360&h=360" alt=""width="193" height="193">
        <p>王克晶专属耳机</p>
        <p>$132</p>
      </van-col>
      <van-col span="12">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/60a9461765a494e54a665f9f52427d9e.jpg?thumb=1&q=90&w=360&h=360" alt=""width="193" height="193">
        <p>王克晶专属摄像头</p>
        <p>$132</p>
      </van-col>
    </van-row>
  </div>
</template>


<script>
import Select from "@/components/Select";
export default {
  name: "list",
  components:{
    Select
  },
  data(){
    return{
      value1: 0,
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      product:[
        {price:7676998.00,tag:"热卖中",desc:"[至高优惠200元，享6期免息，信用卡分期满减享优惠] 双卡双5G",title:"Redmi K50 至尊版",
          thumb:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb3bfa91499d394b23f144d36fb819d5.png",description:"cpu 天玑810 双摄像头 超大屏"},
        {price:6998.00,tag:"人气爆款",desc:"[至高优惠200元，享6期免息，信用卡分期满减享优惠] 双卡双5G",title:"Redmi K50 至尊版",
          thumb:"https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208101511_488638d8f8d5dbcf3b66cd82703ecfb9.png",description:"cpu 天玑810 6400万像素 超大屏"},
        {price:661312998.00,tag:"没什么人买",desc:"[至高优惠200元，享6期免息，信用卡分期满减享优惠] 双卡双5G",title:"Redmi K50 至尊版",
          thumb:"https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208101511_488638d8f8d5dbcf3b66cd82703ecfb9.png",description:"cpu 天玑810 双摄像头 超大屏"},
        {price:43119198.00,tag:"爱买不买",desc:"[至高优惠200元，享6期免息，信用卡分期满减享优惠] 双卡双5G",title:"Redmi K50 至尊版",
          thumb:"https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208112039_cb21539a05b3926928b9c4d8295f2c57.png",description:"cpu 天玑810 双摄像头 超大屏"},
        {price:132193198.00,tag:"给我都不要",desc:"[至高优惠200元，享6期免息，信用卡分期满减享优惠] 双卡双5G",title:"Redmi K50 至尊版",
          thumb:"https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208101511_488638d8f8d5dbcf3b66cd82703ecfb9.png",description:"cpu 天玑810 三摄像头 10800万像素 超大屏"},
        {price:442.00,tag:"免费送",desc:"[至高优惠200元，享6期免息，信用卡分期满减享优惠] 双卡双5G",title:"Redmi K50 至尊版",
          thumb:"https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208112039_cb21539a05b3926928b9c4d8295f2c57.png",description:"cpu 天玑810 双摄像头 超大屏 6.67英寸"},
      ]


    }
  },
  methods: {

  }
}
</script>

<style scoped>

</style>
